<template>
<!-- 登录组件 -->
  <div class="login_container">
    <div class="login_box">
<!-- 头像 区域-->
        <div class="login_img">
            <img src="../assets/logo.png" alt="">
        </div>
<!-- 账户 区域 -->
        <el-form 
        ref="loginform"
        label-width="0px" 
        class="login_form"
        :model="form"
        :rules="rules">
            <!-- 用户名 -->
            <el-form-item label="" prop="username">
                <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="form.username"
                ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="" prop='userpassword'>
                <el-input
                placeholder="请输入密码"
                prefix-icon="iconfont icon-mima"
                type="password"
                v-model="form.userpassword"
                ></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item label="" class="button">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="reflogin">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
      return{
        //   这是登录表单的数据绑定对象
          form:{
              username:'admin',
              userpassword:'123456',
          },
        //   这是表单的验证规则
          rules:{
            //   验证用户
              username:[
                  {required:true,message:'请输入用户名',trigger:'blur'},
                  {min:4,max:12,message:'长度在4-12个字符',trigger:'blur'}
              ],
            //   验证密码
              userpassword:[
                  {required:true,message:'请输入密码',trigger:'blur'},
                  {min:6,max:12,message:'长度在6-12个字符',trigger:'blur'}
              ]
          }
      }
  },
  methods:{
    //   点击重置按钮，重置表单
      reflogin(){
          this.$refs.loginform.resetFields();
      },
    //   效验表单登录前的预验证
    login(){
        this.$refs.loginform.validate(valid=>{
            if(!valid) return;
            new Promise((reslove,reject)=>{
                reslove(this.$axios({
                    method:'post',
                    url:'/login',
                    data:{
                        username:this.form.username,
                        password:this.form.userpassword
                    }
                }))
            }).then(res=>{
                console.log(res)
                if(res.status!==200) return this.$message.error('登录失败');
                this.$message.success('登录成功');
                // 1.将登录成功之后的token，保存在客户端的sessionStorage中
                //     项目中除了登录之外的其他api接口，必须在登录之后才能访问
                //     token 只应在当前网站打开期间有效，所以将token保存在sessionStorage
                //     中

                sessionStorage.setItem('token',res.data.data.token)
                // sessionStorage.setItem('token',res.data.code)


                // 2.通过导航跳转到后台主页，路由地址是 /home
                this.$router.push('/home')
            })
        });
    }
  }
}
</script>

<style lang="less" scoped>
.login_container{
    background: #2b4d6b;
    height: 100%;

    .login_box{
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

        .login_img{
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            padding:10px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-150%);
            background: #fff;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: #eee;
            }
        }
    }
}
.login_form{
    position: absolute;
    width: 100%;
    bottom:0;
    padding:0 20px;
    box-sizing: border-box;

    .icon-password::before{
        padding:0 4px;
    }

    .button{
        display: flex;
        justify-content: flex-end;
    }
}

</style>
